<template>
	<div class="personal-profile">
		<header class="header">
		<!--	<i class="el-icon-erp-bianji edit" @click="goNext"></i>-->
		    <div class="contents">
		       <img :src="headerImg" />
		       <h3>{{userName}}</h3>
		    </div>
		</header>
		<body class="body"></body>
		<root :sort="sort"></root>
	</div> 
</template>

<script>
import root from '@/components/m-shop/m-footer/root'
	export default {
		name:'personal-profile',
		components:{
			root
		},
		data () {
			return {
				headerImg:'',
				userName:'',
				sort:2
			}
		},
		created () {
			this.getShopInfo()
		},
		mounted () {
			
		},
		methods:{
	      getShopInfo() {
		   	this.$http.get(this.$store.state.reqUrl + '/user/info',{}).then(res => {
			if(res.status == 200) {
				 this.headerImg = res.data.headSculptureUrl;
				 this.userName = res.data.userName;
			  }
		    })
		  },
		  goNext () {
		  	 this.$router.push("/personal-modification")
		  }
		}
	}
</script>

<style lang="less" scoped>
    .personal-profile{
    	width:100%;
    	.header{
    		background:#5F9EA0;
    		.edit{
    			position: absolute;
    			top:35px;
    			right:35px;
    			float: right;
    			font-size: 36px;
    			color: #FFFFFF;
    		}
    		.contents{
    			padding:35px 0;
    			img{
    				width:150px;
  			        height:150px;
  			        margin:0 auto;
    				border-radius: 100%;
    				border: 3px solid #FFFFFF;
    			}
    			h3{
    				font-size: 34px;
    				font-weight: 600;
    				color: #FFFFFF;
    				margin-top: 10px;
    				text-align: center;
    			}
    		}
    	}
    }
</style>